<template>
	<view class="fixed-bottom rounded mx-2" 
	style="height: 160rpx; background-color: #d1ccc0;opacity: .9;"
	@tap="toDetailPage" :style="{bottom: `${windowBottom}px`}">
		<!--进度部分-->
		<view class="flex align-center justify-center font" style="color: #7a8388; height: 65rpx;" @tap.stop>
			<!--总时长-->
			<view>{{format(durationTime)}}</view>
			<!--进度条部分-->
			<view style="width: 500rpx;">
				<slider @change="SlideToPlay" @changing="SlideToPlay" block-size="16" activeColor="#e48267"
					backgroundColor="#eef2f3" :max="durationTime || 100" :value="currentTime" />
			</view>
			<!--播放时刻-->
			<view>{{format(currentTime)}}</view>
		</view>

		<view class="flex align-center justify-between mx-2" style="height: 95rpx;">
			<!-- 音频相关信息 -->
			<view class="font" style="color: #424651;">
				<view>歌手-{{singerName}}</view>
				<view>歌曲-{{audioName}}</view>
			</view>
			<!-- 音频按钮部分 -->
			<view class="flex align-center" @tap.stop>
				<view class="animated" hover-class="pulse">
					<iconfont iconId="icon-shangyishou" iconSize="75" @iconclick="PreOrNext('pre')"></iconfont>
				</view>
				<iconfont :iconId="playStatus?'icon-bofang':'icon-ziyuan'" iconSize="75" class="mx-2"
					@iconclick="PlayOrPause"></iconfont>
				<view class="animated" hover-class="pulse">
					<iconfont iconId="icon-xiayishou" iconSize="75" @iconclick="PreOrNext('next')"></iconfont>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import unit from '../common/unit.js';

	export default {
		data() {
			return {
				windowBottom: uni.getSystemInfoSync().windowBottom
			};
		},
		computed: {
			...mapState({
				playStatus: ({
					audio
				}) => audio.playStatus,
				durationTime: ({
					audio
				}) => audio.durationTime,
				currentTime: ({
					audio
				}) => audio.currentTime,
			}),
			...mapGetters(['audioName', 'singerName'])
		},
		methods: {
			...mapMutations(['destruction']),
			...mapActions(['init', 'PlayOrPause', 'PreOrNext', 'SlideToPlay']),
			format(time) {
				if (!time) {
					return '00:00';
				}
				return unit.formatTime(time);
			},
			toDetailPage(){
				uni.navigateTo({
				    url: '/pages/musicDetail/musicDetail'
				});
			}
		},
		mounted() {
			this.init()
		},
		destroyed() {
			this.destruction()
		}
	}
</script>

<style>

</style>
